<!--
 * @Description: 
 * @Version: 1.0
 * @Author: wenbin
 * @Date: 2021-05-13 16:47:58
 * @LastEditors: wenbin
 * @LastEditTime: 2021-05-27 09:31:28
 * @FilePath: /magus-plugin/examples/views/About.vue
 * Copyright (C) 2021 wenbin. All rights reserved.
-->
<template>
  <magus-main-layout>
    <!-- 上方TAB空间，如果不需要请删除 -->
    <template slot="layoutTab"> <magus-tree> </magus-tree></template>
    <!-- 内容部分 -->
    <template slot="layoutMain">
      <!--  -->
      <magus-add-template :title="title">
        <template slot="header"><!-- 头部右边需要 --></template>
        <template slot="main">
          <el-form
            ref="appInfo"
            :rules="rules"
            :model="appData"
            label-width="100px"
            size="mini"
          >
            <el-form-item :label="$t('platform.apps.appname')" prop="name">
              <el-input v-model="appData.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('platform.apps.appcode')" prop="code">
              <el-input v-model="appData.code"></el-input>
            </el-form-item>
            <el-form-item :label="$t('platform.apps.opentype')" prop="enabled">
              <el-radio-group v-model="appData.enabled" size="mini">
                <el-radio-button :label="true">是</el-radio-button>
                <el-radio-button :label="false">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('platform.apps.remark')">
              <el-input
                type="textarea"
                :rows="2"
                resize="none"
                v-model="appData.remark"
              ></el-input>
            </el-form-item>
            <el-collapse v-model="activeNames">
              <el-collapse-item
                :title="$t('platform.apps.app_web_config')"
                name="web"
              >
                <el-form-item :label="$t('platform.apps.app_web_host')">
                  <el-input v-model="appData.webHost"></el-input>
                </el-form-item>
                <el-form-item :label="$t('platform.apps.app_web_port')">
                  <el-input v-model="appData.webPort"></el-input>
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item
                :title="$t('platform.apps.app_api_config')"
                name="api"
              >
                <el-form-item :label="$t('platform.apps.apptype')" prop="type">
                  <el-radio-group v-model="appData.type" size="mini">
                    <el-radio-button label="LOCAL">本地</el-radio-button>
                    <el-radio-button label="REMOTE">远程</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('platform.apps.app_api_baseurl')">
                  <el-input v-model="appData.baseUrl"></el-input>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
            <!-- <el-form-item :label="$t('platform.apps.appprotocol')">
            <el-input
              v-model="appData.protocol"
              :disabled="appData.type === 'LOCAL'"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('platform.apps.appip')">
            <el-input
              v-model="appData.host"
              :disabled="appData.type === 'LOCAL'"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('platform.apps.appport')">
            <el-input
              v-model="appData.port"
              :disabled="appData.type === 'LOCAL'"
            ></el-input>
          </el-form-item> -->
            <!-- <el-form-item :label="$t('platform.apps.accesspath')" prop="path">
            <el-input v-model="appData.path"></el-input>
          </el-form-item> -->
          </el-form>
        </template>
        <template slot="footer">
          <el-button v-show="!$route.query.id" size="mini">{{
            $t("global.action.back")
          }}</el-button>
          <el-button type="primary" :loading="saveLoading" size="mini">{{
            $t("global.action.save")
          }}</el-button>
        </template>
      </magus-add-template>
    </template>
  </magus-main-layout>
</template>
<script>
export default {
  name: "About",
  components: {},
  data() {
    return {
      title: "应用信息",
      appData: {
        name: "",
        code: "",
        type: "LOCAL",
        remark: "",
        enabled: true,
        baseUrl: "",
        webHost: "",
        webPort: "",
      },
      activeNames: ["web", "api"],
      saveLoading: false,
      rules: {
        name: [
          {
            required: true,
            message: this.$t("platform.apps.appname"),
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: this.$t("platform.apps.appcode"),
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: this.$t("platform.apps.apptype"),
            trigger: "change",
          },
        ],
        path: [
          {
            required: true,
            message: this.$t("platform.apps.accesspath"),
            trigger: "blur",
          },
        ],
        enabled: [
          {
            required: true,
            message: this.$t("platform.apps.enabled"),
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {},
  },
  created() {},
  mounted() {},
};
</script>
